/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image,
    ScrollView,
    TouchableOpacity,
    ListView,
    RefreshControl
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import Global from "../Commom/GlobalConst";
import RuralAPIService from "../Commom/RuralAPIService";
import Toast from '../Utils/toast';
import QuestionDetailsPage from './QuestionDetailsPage';
export default class ListQuestionAnswerPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSourceList: dataSourceData,
            aboutWithImage:[{image:require('../../Image/new/image_01.png')},
                {image:require('../../Image/new/image_02.png')},
                {image:require('../../Image/new/image_03.png')}],
            record_count:1,
            page: 1,
            dataList:[],
            isRefreshing:false
        }
    }
    componentDidMount() {
        this.onRefreshData();
    }
    BackAction() {
        this.props.navigator.pop();
    }
    onRefreshData(){
        RuralAPIService.QuestinAnswerList(1).then((ret)=> {
            this.setState({
                dataList:ret.result,
                page:ret.page,
                record_count:ret.record_count,
                isRefreshing: false,
            })
        }).catch((err)=> {
        });
    }
    loadMoreData(){
        if (this.state.page < this.state.record_count) {
            this.setState({
                isRefreshing: true,
            });
            RuralAPIService.QuestinAnswerList(this.state.page + 1).then((ret)=> {
                this.setState({
                    dataList:this.state.dataList.concat(ret.result),
                    page:ret.page,
                    record_count:ret.record_count,
                    isRefreshing: false,
                })
            }).catch((err)=> {
            });
        } else {
            if (this.state.page != 1) {
                Toast.show('木有更多数据');
            }
        }
    }
    goQA(id){
        this.props.navigator.push({
            id: 'QuestionDetailsPage',
            component: QuestionDetailsPage,
            passProps: {
                ID:id
            }
        });
    }
    ListDataRow(rowData){
        return(
            <TouchableOpacity activeOpacity={0.5}
                              onPress={()=>this.goQA(rowData.id)}>
            <View style={{backgroundColor:'white',borderBottomWidth:1,borderColor:Global.Const.transparent,}}>
                <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                               source={{uri:rowData.avatar_image}}
                        />
                        <Text >{rowData.avatar_name}</Text>
                    </View>
                    <Text style={{marginRight:10}}>{rowData.time}</Text>
                </View>
                <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,marginBottom:20}}>{rowData.content}
                </Text>
            </View>
            </TouchableOpacity>
        );
    }
    render() {
        return (
        <View style={styles.container}>
            <View style={{width,height:64,backgroundColor:'#24CD78',flexDirection:'row',justifyContent:'space-between',paddingTop:20,alignItems:'center'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.BackAction()}>
                    <View style={{flexDirection:'row',width:40,height:40,marginLeft:10,alignItems:'center',}}>
                        <Image style={{width:17,height:17,resizeMode:'contain',marginLeft:3}}
                               source={require('../../Image/back_icon_white.png')}/>
                    </View>
                </TouchableOpacity>
                <Text style={{color:'white',fontSize:19}}>你问我答</Text>
                <View style={{flexDirection:'row',width:40,height:40,marginRight:10,justifyContent:'flex-end',alignItems:'center'}}>
                </View>
            </View>
            <ListView
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => {this.onRefreshData()}}
                        colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                        progressBackgroundColor="white"
                    /> }
                onEndReachedThreshold={50}
                onEndReached={() => {this.loadMoreData()}}

                enableEmptySections={true}
                dataSource={this.state.dataSourceList.cloneWithRows(this.state.dataList)}
                renderRow={(rowData)=>this.ListDataRow(rowData)}/>
        </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'white',
    },
});

